import React from "react";
import {Flex,Carousel} from 'antd-mobile'
import s from './index.scss'
import a1Png from 'assets/images/about/11.png';
import b1Png from 'assets/images/about/12.png';
import c1Png from 'assets/images/about/13.png';
import abgPng from 'assets/images/about/abg.png';

import a2Png from 'assets/images/about/21.png';
import b2Png from 'assets/images/about/22.png';
import c2Png from 'assets/images/about/23.png';
import d2Png from 'assets/images/about/24.png';

import a3Png from 'assets/images/about/31.png';
import b3Png from 'assets/images/about/32.png';
import c3Png from 'assets/images/about/33.png';

import a4Png from 'assets/images/about/41.png';
import b4Png from 'assets/images/about/42.png';
import c4Png from 'assets/images/about/43.png';

import a5Png from 'assets/images/about/51.png';
import b5Png from 'assets/images/about/52.png';
import c5Png from 'assets/images/about/53.png';

import a6Png from 'assets/images/about/62.png';
import b6Png from 'assets/images/about/61.png';
import c6Png from 'assets/images/about/63.png';

import a7Png from 'assets/images/about/71.png';
import b7Png from 'assets/images/about/72.png';
import c7Png from 'assets/images/about/73.png';

import a8Png from 'assets/images/about/81.png';
import b8Png from 'assets/images/about/82.png';
import c8Png from 'assets/images/about/83.png';


export default class extends  React.PureComponent{

    constructor(props){
        super(props)
        this.state={

        }
    }
   
   
    render(){
        return(<div>
               <Carousel vertical infinite className={`${s.aboutUsBox}`} >
                    <div className={`${s.aboutUsItem}`} style={{background:`url(${abgPng}) no-repeat  100% 100%/100%`}}>
                        <img src={a1Png} className={`${s.one}`}/>
                        <img src={b1Png} className={`${s.two}`}/>
                        <img src={c1Png} className={`${s.three}`}/>
                    </div>
                    <div className={`${s.aboutUsItem}`} style={{background:`url(${abgPng}) no-repeat  100% 100%/100%`}}>
                        <img src={a2Png} className={`${s.one2}`}/>
                        <img src={b2Png} className={`${s.two2}`}/>
                        <img src={c2Png} className={`${s.three2}`}/>
                        <img src={d2Png} className={`${s.three}`}/>
                    </div>
                    <div className={`${s.aboutUsItem}`} style={{background:`url(${abgPng}) no-repeat  100% 100%/100%`}}>
                        <img src={a3Png} className={`${s.two2}`}/>
                        <img src={b3Png} className={`${s.three2}`}/>
                        <img src={c3Png} className={`${s.three}`}/>
                    </div>
                    <div className={`${s.aboutUsItem}`} style={{background:`url(${abgPng}) no-repeat  100% 100%/100%`}}>
                        <img src={a4Png} className={`${s.two2}`}/>
                        <img src={b4Png} className={`${s.three2}`}/>
                        <img src={c4Png} className={`${s.three}`}/>
                    </div>
                    <div className={`${s.aboutUsItem}`} style={{background:`url(${abgPng}) no-repeat  100% 100%/100%`}}>
                        <img src={a5Png} className={`${s.two2}`}/>
                        <img src={b5Png} className={`${s.three2}`}/>
                        <img src={c5Png} className={`${s.three}`}/>
                    </div>
                    <div className={`${s.aboutUsItem}`} style={{background:`url(${abgPng}) no-repeat  100% 100%/100%`}}>
                        <img src={a6Png} className={`${s.two2}`}/>
                        <img src={b6Png} className={`${s.three2}`}/>
                        <img src={c6Png} className={`${s.three}`}/>
                    </div>
                    <div className={`${s.aboutUsItem}`} style={{background:`url(${abgPng}) no-repeat  100% 100%/100%`}}>
                        <img src={a7Png} className={`${s.two2}`}/>
                        <img src={b7Png} className={`${s.three2}`}/>
                        <img src={c7Png} className={`${s.three}`}/>
                    </div>
                    <div className={`${s.aboutUsItem}`} style={{background:`url(${abgPng}) no-repeat  100% 100%/100%`}}>
                        <img src={a8Png} className={`${s.one}`} style={{width:'1.32rem'}}/>
                        <img src={b8Png} className={`${s.two}`} style={{height:'0.8rem'}}/>
                        <img src={c8Png} className={`${s.three}`} style={{height:'3rem'}}/>
                    </div>
                   
                 </Carousel>
               </div>)

        }
    }
 
